<template>
  <div class="chart-box" ref="pieCharts_2"></div>
</template>

<script>
  import resize from '../mixins/resize'

  export default {
    name: "EchartBar",
    mixins: [resize],
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        }
      },
      datas: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        chart: null,
      }
    },
    watch: {
      data: {
        deep: true,
        handler: function (val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = this.$echarts.init(this.$refs.pieCharts_2)
        this.setOptions(this.data)
      },
      setOptions({xdata = [], data = []}) {
        if (!this.chart) {
          return false
        }
        this.chart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross"
            },
            backgroundColor: "rgba(0,0,0,0.8)", //设置背景图片 rgba格式
            color: "#537099",
            borderWidth: "1", //边框宽度设置1
            borderColor: "gray", //设置边框颜色
            textStyle: {
              color: "#537099", //设置文字颜色
            },
          },
          grid: {
            show: true,
            top: '8%',
            left: "4%",
            right: "8%",
            bottom: "4%",
            containLabel: true,
            borderColor: '#0694ce',
            zlevel: 2,
          },
          xAxis: [
            {
              type: 'category',
              zlevel:1,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              boundaryGap: false,
              minorTick: {
                show: true
              },
              axisTick: {show: false},
              axisLabel: {color: '#0694ce', fontSize: 15, showMaxLabel: true},
              axisLine: {show: true, lineStyle: {color: '#0694ce'}},
              splitLine: {show: true, lineStyle: {color: '#0694ce',type:'dashed'}}
            },
          ],
          yAxis: {
            type: 'value',
            name: '',
            zlevel:1,
            nameTextStyle: {color: '#fff', fontSize: 15},
            axisTick: {show: false},
            splitArea: {show: false},
            axisLabel: {color: '#0694ce', fontSize: 14, showMaxLabel: true},
            axisLine: {show: true, lineStyle: {color: '#0694ce'}},
            splitLine: {show: true, lineStyle: {color: '#0694ce',type:'dashed'}},
            min: 0
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
              itemStyle: {normal: {color: '#0694ce', lineStyle: {color: '#0694ce', width: 2}}},
            }
          ]
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .chart-box {
    width: 100%;
    height: 100%;
  }
</style>